<template>
    <div class="header">
      <div class="wrapper">
        <div class="logo">
          <a href="https://www.gxust.edu.cn/" target="_blank">
            <img src="https://t12.baidu.com/it/u=1101503349,374851475&fm=179&app=42&f=JPEG?w=120&h=120&s=A803F1144E9171F31A0E4112030030EA" width="60px">
          </a>
        </div>
        <div class="title" @click="gotoHome">广西科技大学</div>
        <div class="nav">
          <el-tabs v-model="menuName" @tab-click="handleClick(menuName,gotoList(menuName))" v-for="item in categoryTreeList" v-bind:key="item.id">
            <el-tab-pane :label="item.name" :name="item.name"></el-tab-pane>
          </el-tabs>
          <!-- <ul>
            <li v-for="item in categoryTreeList" v-bind:key="item.id" @click="gotoList(item.id)">{{item.name}}</li>
          </ul> -->
        </div>
        <!-- <div><img src="https://www.gxust.edu.cn/images/logo.png" alt=""></div> -->
        <div class="contact" @click="gotoContact">联系我们</div>
      </div>
    </div>
</template>
<script>
import {get} from '../../utils/request';
export default {
  data(){
    return {
      categoryTreeList:[],
      menuName: '',
    }
  },
  methods:{
    // 获取头菜单信息
    categoryTree(){
      get('/index/category/findCategoryTree').then(resp=>{
        this.categoryTreeList = resp.data;
      })
    },
    // 跳转到主页
    gotoHome(){
      this.$router.push('/home');
    },
    gotoList(name){
      this.$router.push({path:'/list',query:{name}});
    },
    // 跳转到联系我们页
    gotoContact(){
      this.$router.push('/contact');
    },
    // 点击菜单跳转
    handleClick(tab, event) {
        // console.log(tab, event);
        // this.gotoList(3);
    }
  },
  watch: {
      '$route' (to, from) { //监听路由是否变化
      // 当跳转到List外的页面，取消选中
        if(to.name != 'List'){
          this.menuName = '';
        }
      }
  },
  created(){
    this.categoryTree();
  }
}
</script>
<style lang="scss" scoped>
  .header{
    height: 85px;
    padding: .5em 0;
    line-height: 60px;
    // background-image: url('https://www.gxust.edu.cn/images/back01.png');
    .wrapper{
      width: 80%;
      // height: 50px;
      margin: 0 auto;
      overflow: hidden;
      div{
        float: left;
      }
      .logo{
        width: 60px;
        height: 60px;
        // border: 1px solid #000;
        box-sizing: border-box;
        opacity: 0.7;
      }
      .title{
        font-weight: bold;
        font-size: 20px;
        padding: 0 1em;
        cursor: pointer;
      }
      // .nav{
      //   ul{
      //     font-size: 16px;
      //     li{
      //       float: left;
      //       padding: 0 1em;
      //       text-align: center;
      //       cursor: pointer;
      //     }
      //   }
      // }
      .contact{
        float: right;
        cursor: pointer;
      }
    }
  }
  
  
</style>